
/**
 * Created by admin on 2018/10/8.
 */
//左侧菜单的active状态及右边版块的切换
$(function(){
    //   将图片和下面的文字用对象存起来
    var productData = [
        [{"image" :"li11.png"  ,"text" : "火花塞"},
            {"image" :"li12.png"  ,"text" : "汽车零部件"},
            {"image" :"li13.png"  ,"text" : "汽车零部件1"},
            {"image" :"li14.png"  ,"text" : "汽车零部件2"},
            {"image" :"li15.png"  ,"text" : "汽车零部件3"},
            {"image" :"li16.png"  ,"text" : "日产发动机外壳"}
        ],

        [{"image" :"li21.png"  ,"text" : "航天火花塞"},
            {"image" :"li22.png"  ,"text" : "航空机械零部件"}
        ],

        [{"image" :"li31.png"  ,"text" : "机械零件模型"},
            {"image" :"li32.png"  ,"text" : "精密机械设备零件手板模型"},
            {"image" :"li33.png"  ,"text" : "铝合金机械设备零件"},
            {"image" :"li34.png"  ,"text" : "手板模型1"},
            {"image" :"li35.png"  ,"text" : "手板模型2"},
            {"image" :"li36.png"  ,"text" : "手板模型3"}
        ],

        [{"image" :"li41.png"  ,"text" : "铝合金医疗"},
            {"image" :"li42.png"  ,"text" : "医疗器械外壳"}
        ],

        [{"image" :"li51.png"  ,"text" : "火花塞"},
            {"image" :"li52.png"  ,"text" : "汽车零部件"},
            {"image" :"li53.png"  ,"text" : "汽车零部件2"},
            {"image" :"li54.png"  ,"text" : "日产发动机外壳"}
        ]
    ];
    //初始让带第一个条数据展示出来
    //print(productData[0]);
    //$(".content-left ul li").each(function(){
    //    $(this).click(function(){
    //        var  index = $(this).index();
    //        //清空前面的数据
    //        $(".content-img").empty();
    //        print(productData[index]);
    //        $(this).addClass('active').siblings("li").removeClass('active');

    function bindLaypage(htmlId,data){
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem : htmlId,
                theme: '#f0d021; ',
                // first:'首页',
                //last:'尾页',
                prev:'上一页',
                next:'下一页',
                limit: 6,
                //  curr:location.hash.replace('#!fenye=','.p-header'),
                // hash:'fenye',
                count : data.length,
                jump: function(obj){
                    //清空当前数据
                    $(".content-img").empty();
                    var arr = [] ;
                    for(var i =(obj.curr-1)*obj.limit ;i < obj.curr * obj.limit && i< data.length ; i++){
                        arr.push(data[i]);
                    }
                    //展示li
                    print(arr);
                    //分页跳转后的锚点定位

                }
            })
        })
    }

    //初始让第一条数据展示出来
    bindLaypage('page',productData[0]);

    $(".content-left ul li").each(function() {
        $(this).click(function () {
            var index = $(this).index();
            //清空前面的数据
            //$(".content-img").empty();
            //  print(productData[index]);
            bindLaypage('page',productData[index]);
            $(this).addClass('active').siblings("li").removeClass('active');
        });
    });

//遍历得到产品图
    function print(subData){
        //   console.log(subData)
        for(var j=0 ;j<subData.length ; j++){
            //console.log(subData.text);
            var showProductions = $(".content-img");
            showProductions.append(' <div class="img-border">'+
            '<img src="../static/image/slm/'+ subData[j].image +'" alt=""/>'+
            '<p>'+ subData[j].text + '</p>'+
            ' </div>');

        }

    }




});








